<template>
	<view class="content">
		<swiper class="swiper-box" @change="change" indicator-dots autoplay interval="5000" circular>
			<swiper-item v-for="(item, index) in swiperList" :key="item.id">
				<image :src="item.thumb_url" >
			</swiper-item>
		</swiper>
		<uni-notice-bar showIcon scrollable single :text="text" />
		<ul class="wxList">
			<li v-for="(item,index) in wxList" :key="item.id">
				<view @click="onclick(item.url)" class="wxListBox">
					<image :src="item.thumb_url" alt="" />
					<view class="wxlistContent">
						<h2>{{item.title}}</h2>
						<p>{{item.digest}}</p>
					</view>
				</view>
			</li>
			<!-- 复制上面的<li>块以添加更多新闻条目 -->
		</ul>
	</view>
</template>

<script>
	import {
		getListAsync
	} from '@/api/getWxlist.js'
	export default {
		data() {
			return {
				title: '公众号',
				wxList: [],
				swiperList: [],
				text: '所有文章内容属于一枪换一弹',
				isApp: ''
			}
		},
		onLoad() {
			this.isApp = process.env.VUE_APP_PLATFORM;
			this.getWxlist();
		},
		methods: {

			async getWxlist() {
				try {
					const {
						data
					} = await getListAsync();
					this.wxList = data;
					this.swiperList = this.wxList.slice(-3);
				} catch (err) {

				}
			},

			change() {},

			onclick(url) {
				if (this.isApp == 'h5') {
					return window.open(url, '_self');
				}
				
				if (this.isApp == 'mp-weixin') {
					const encodedUrl = encodeURIComponent(url);
					return uni.navigateTo({
						url: `/pages/webview/webview?url=${encodedUrl}`
					});
				}
				
				if(this.isApp == 'app-plus'){
					return plus.runtime.openURL(url);
				}

			}
		}
	}
</script>

<style>
	.content {
		width: 100vw;
	}

	.swiper-box {
		width: 100vw;
		height: 400rpx;
	}

	image {
		object-fit: contain;
		height: 100%;
		width: 100%;
	}

	.wxList {
		list-style: none;
		margin: 0;
		padding: 10rpx;
		height: calc(100vh - 600rpx);
		overflow: auto;
	}

	.wxList li {
		background: #fff;
		margin-bottom: 20rpx;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.wxList li view {
		display: flex;
		text-decoration: none;
		color: inherit;

	}

	.wxList image {
		max-width: 200rpx;
		min-width: 200rpx;
		/* 调整图片宽度以适应手机屏幕 */
		height: 200rpx;
		border-radius: 16rpx;
		object-fit: cover;
		margin-right: 30rpx;
	}

	.wxList .content {
		/* flex-grow: 1;
		display: flex;
		flex-direction: column;
		justify-content: center; */
	}

	.wxListBox {
		display: flex;
		padding: 30rpx;
		text-decoration: none;
		color: #555;
	}


	.wxlistContent {
		display: block !important;
	}

	.wxList .wxListBox h2 {
		padding: 0;
		margin: 0;
		font-size: 32rpx;
		margin-bottom: 10rpx;
		font-weight: 600;
		display: -webkit-box;
		/* 必须 */
		-webkit-box-orient: vertical;
		/* 必须 */
		-webkit-line-clamp: 2;
		/* 设置为2行 */
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.wxList .wxListBox p {
		font-size: 28rpx;
		color: #555;
		display: -webkit-box;
		/* 必须 */
		-webkit-box-orient: vertical;
		/* 必须 */
		-webkit-line-clamp: 2;
		/* 设置为2行 */
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>